<template>
  <div class="tab ">
    <div class="tab-item" @click="tabClick">
      <span class="tab-main">{{ title }}</span>
      <count-to :duration='3000' :endVal='endVal' :startVal='startVal' class="tab-main"/>
    </div>
    <el-divider class="line" direction="vertical"></el-divider>
  </div>

</template>

<script>
import countTo from 'vue-count-to';

export default {
  name: "",
  components: {countTo},
  props: {
    title: {
      type: String,
      default: '内容标题 title'
    },
    endVal: {
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      startVal: 0,
    };
  },
  computed: {},
  methods: {
    tabClick() {
      this.$emit("tabClick")
    },
  },
  created() {
  },
  mounted() {
  },
};


</script>

<style lang="scss" scoped>

.tab {
  display: flex;
  height: 100%;
  align-items: center;
  margin: 0 10px;
}

.tab-item {
  height: 100%;
  display: grid;
  place-content: center;

  :first-child {
    color: #7b7474;
    font-size: 15px;
    padding-bottom: 10px;
  }
}

.tab-main {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
}

.line {
  height: 30%;
  width: 2px;
  margin: 0 30px;
}

</style>
